{% extends 'myhome/base.html' %}

{% block con %}
<!--路径导航 面包屑导航-->
<div class="breadcrumbs-area mb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumbs-menu">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#" class="active">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="user-login-area mb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="login-title text-center mb-30">
                    <h2>注册</h2>
                </div>
            </div>
            <div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
                <form action="{% url 'myhome_doregister' %}" method="post">
                    {% csrf_token %}
                    <div class="login-form">
                        <div class="single-login">
                            <label>手机号<span>*</span></label>
                            <input type="text" name="phone" required>
                        </div>
                        <div class="single-login">
                            <label>密码<span>*</span></label>
                            <input type="password" name="password" required>
                        </div>
                        <div class="single-login">
                            <label>确认密码<span>*</span></label>
                            <input type="password" name="repassword" required>
                        </div>
                        <div class="single-login" style="position: relative;">
                            <label>验证码<span>*</span></label>
                            <input type="text" name="vcode">
                            <a id="sendcode" href="javascript:void(0)" style="position: absolute;top: 29px;right: 2px;border: none;">发送手机验证码</a>
                        </div>
                        <div class="single-login single-login-2">
                            <a href="javascript:void(0)" id="register_button">注册</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    var isphone = false
    var ispass = false
    var isrepass = false
    var isclick = false
    var vcode = false
    var isvcode = false


    // 给发送短信验证绑定单击事件
    $('#sendcode').click(function () {
        // 判断是否可以触发单击事件
        if(isclick){return;}

        // 获取当前的手机号并验证是否正确
        if(!isphone){
            alert('请先填写正确的手机号码')
            return;
        }

        // 同时设计当前按钮60秒内不能再次点击
        isclick = true
        $(this).css('background','gray')
        $(this).text('发送手机验证码(60)')
        var time = 60
        var in1 = setInterval(function () {
            time -= 1
            $('#sendcode').text('发送手机验证码('+time+')')
        },1000)
        setTimeout(function () {
            isclick = false
            $('#sendcode').css('background','green')
            $('#sendcode').text('发送手机验证码')
            clearInterval(in1)
        },60000)

        // 如果正确,则发送ajax请求,发送短信验证码
        $.get('{% url "myhome_sendphone" %}',{'phone':isphone},function (data) {
            // 判断当前的验证码对否发送成功
            // console.log(data)
            vcode = data['vcode']
            console.log(vcode)
        },'json')
    })

    // 验证输入的短信验证码是否正确
    $('input[name=vcode]').blur(function () {
        if($(this).val()==vcode){
            $(this).css('border','1px solid green')
            isvcode = true
        }else{
            $(this).css('border','1px solid red')
            isvcode = false
        }
    })

    // 给注册的a标签绑定单击事件
    $('#register_button').click(function () {
        $(this).parents('form').submit()
    })

    // 给表单绑定表单提交事件
    $('form').submit(function () {
        // 触发所有input的丧失焦点事件
        $('input').trigger('blur')
        // 验证手机号和密码,是否都正确
        if(isphone && ispass && isrepass && isvcode){
            return true
        }else{
            return false
        }
    })

    // 给手机号绑定丧失焦点事件
    $('input[name=phone]').blur(function () {
        // 获取当前的手机号
        phone = $(this).val()

        // 验证手机号格式是否正确
        reg = /^1\d{10}$/
        if (!reg.test(phone)) {
            // 手机号码格式不正确
            $('input[name=phone]').css('border','1px solid red')
            // alert('手机号码格式不正确')
            isphone = false
            return;
        }

        // 如果手机号格式正确,再去验证手机号是否已经注册
        $.get('{% url "myhome_checkphone" %}', {'phone':phone}, function (data) {
            // 判断返回的结果
            if (data['code'] == 0) {
                isphone = true
                $('input[name=phone]').css('border','1px solid blue')
            } else {
                alert(data['msg'])
                isphone = false
                $('input[name=phone]').css('border','1px solid red')
            }
        }, 'json')

    })

    // 验证密码的
    $('input[name=password]').blur(function () {
        password = $(this).val()
        reg = /^\w{6,18}$/
        if (reg.test(password)){
            $(this).css('border','1px solid blue')
            ispass = true
        }else{
            $(this).css('border','1px solid red')
            ispass = false
        }
    })

    // 验证确认密码的
    $('input[name=repassword]').blur(function () {
        repassword = $(this).val()
        repassword = $('input[name=password]').val()
        reg = /^\w{6,18}$/
        if (reg.test(password) && repassword == password){
            $(this).css('border','1px solid blue')
            isrepass = true
        }else{
            $(this).css('border','1px solid red')
            isrepass = false
        }
    })

</script>
{% endblock %}
